const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const { isProd, cssHandle } = require('./config.js');
const path = require('path');
// const svgToMiniDataURI = require('mini-svg-data-uri');

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            // {
            //     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            //     use: [
            //       {
            //         loader: 'url-loader',
            //         options: {
            //           limit: 8192,
            //           esModule: false
            //         }
            //       }
            //     ]
            // },
            // {
            //     test: /\.svg$/,
            //       loader: 'svg-sprite-loader',
            //       include: [path.resolve('src')],
            //       options: {
            //         symbolId: 'icon-[name]'
            //       }
            // },
            // {
            //     test: /\.svg/,
            //     type: 'asset/inline',
            //    generator: {
            //      dataUrl: content => {
            //        content = content.toString();
            //        return svgToMiniDataURI(content);
            //      }
            //    }
            // },
            {
                test: /\.svg$/,
                type: 'asset/inline'
            },
            {
                test: /\.(png|jpe?g|gif)(\?.*)?$/,
                type: 'asset/resource'
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: cssHandle(),
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: cssHandle('scss'),
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: file => (
                    /node_modules/.test(file) && !/\.vue\.js/.test(file)
                )
            }
        ]
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new VueLoaderPlugin()
    ],
    target: 'web',
    resolve: { // 配置路径别名
        extensions: ['.js', '.vue', '.scss'], // import引入文件的时候不用加后缀
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
}
